<template>
  <div style="margin-bottom:54px">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item.name"
        v-for="(item,index) in categorylist"
        @click="onChange(item.id)"
        :key="index"
      />
    </van-sidebar>
    <!-- 右侧 -->
    <div class="right">
      <div class="top">
        <p>{{list.front_name}}</p>
        <img :src="list.banner_url" class="topimg" />
      </div>
      <Lines :titles="{name:list.name+'分类',size:'14px'}"></Lines>
      <div class="grid">
        <van-grid :column-num="3">
          <van-grid-item v-for="(v,k) in list.subCategoryList" :key="k" @click="toCatelist(v.id)">
            <van-image :src="v.wap_banner_url" />
            <div>{{v.name}}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { CurrentList} from "@/request/api";
import Lines from "@/components/Home/Line.vue";

export default {
  components: {
    Lines
  },
  props: ["categorylist"],
  data() {
    return {
      activeKey: 0,
      list: []
    };
  },
  created() {
    CurrentList({ id: 1005000 }).then(res => {
      this.list = res.data.currentCategory;
    });
  },
  methods: {
    toCatelist(e) {
      this.$router.push("/channel/" + e);
    },
    onChange(e) {
      CurrentList({ id: e }).then(res => {
        this.list = res.data.currentCategory;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.right {
  margin-left: 75px;
  .top {
    padding: 10px 2%;
    position: relative;
    p {
      position: absolute;
      z-index: 999;
      color: #fff;
      top: 0;
      line-height: 120px;
      font-size: 14px;
      left: 0;
      text-align: center;
      width: 100%;
    }
    .topimg {
      width: 100%;
      height: 150px;
      box-shadow: 0 0 3px #000;
      -webkit-filter: brightness(70%);
      filter: brightness(70%);
    }
  }
  .grid {
    /deep/.van-grid-item__content::after {
      border: none;
    }
  }
}
</style>